<template>
  <ul class="header-title">
    <li
      @click="handleTab(item, index)"
      v-for="(item, index) in titleArr"
      :class="tabIndex === index ? 'active' : ''"
      :key="item"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  props: ['titleArr', 'tabIndex'], // props接收从父组件传递给我的内容
  methods: {
    // 当前的点击事件在子组件中，需要将点击的内容，传递给父组件，父组件拿到，然后处理数据，渲染
    handleTab(item, index) {
      console.log('子组件:', item, index)
      // 子传递给父组件 $emit的第一个参数 叫自定义事件名字，第二个参数，是传递的数据
      this.$emit('toParent', { item, index })
    },
  },
}
</script>

<style lang="scss" scoped>
// scoped 让当前组件的样式，只在当前组件生效，相当于css的模块化，可以防止css起名冲突
.active {
  background: red;
  color: gold;
}
</style>
